<template>
  <van-list>
    <div v-if="!(wrongInfoCount === 0)">
      <van-cell>
        KKScode:
        <span>{{wrongInfo.KKScode}}</span>
      </van-cell>
      <van-cell>
        工作描述:
        <span>{{wrongInfo.description}}</span>
      </van-cell>
      <van-cell>
        厂房位置:
        <span>{{wrongInfo.location}}</span>
      </van-cell>
      <van-cell>
        执行进展:
        <span>{{wrongInfo.progress}}</span>
      </van-cell>
      <van-cell>
        隔离到期日期
        <span>{{wrongInfo.deadLine}}</span>
      </van-cell>
      <van-cell>
        工作负责人:{{wrongInfo.leader}}
        <van-field
          readonly
          clickable
          :value="value"
          placeholder="选择正确的负责人..."
          @click="showPicker = true"
        />
      </van-cell>
      <van-cell @click="showStaffList = true">
        工作成员:
        <span v-for="(item,index) in memberList" :key="index">{{item}},</span>
      </van-cell>
      <van-button type="primary" @click="handleSubmit">保存</van-button>
      <!-- 工作负责人选择框 -->
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
      <!-- 工作人员选择框 -->
      <van-popup v-model="showStaffList" position="bottom">
        <div v-show="staffListCount">
          <van-list>
            <van-checkbox-group v-model="memberList">
              <van-cell v-for="(item,index) in staffList" :key="index">
                <van-checkbox :name="item">{{item}}</van-checkbox>
              </van-cell>
            </van-checkbox-group>
            <van-button type="primary" @click="showStaffList = false">确定</van-button>
          </van-list>
        </div>
      </van-popup>
    </div>
    <div v-else>
      <loading />
    </div>
  </van-list>
</template>
<style lang="less" scoped>
.van-button {
  margin: 0.5rem 0;
  width: 90%;
}

.van-switch {
  font-size: 22px !important;
  top: 0.5rem;
}

.van-cell.van-cell--clickable.van-field {
  padding: 0;
  padding-left: 10%;
  display: inline-block;
  width: 60%;
}
</style>

<script>
import loading from "@/components/loading.vue";
import {Dialog} from "vant";
import {
  getWrongInfo,
  getStaffList,
  getLeaderList,
  postMarkTask
} from "@/api/data";
export default {
  data() {
    return {
      wrongId: -1,
      wrongIndex: -1,
      showStaffList: false,
      wrongInfo: {},
      value: "", //工作负责人
      memberList: [], //工作人员
      columns: [], //待选择工作负责人列表
      showPicker: false,
      staffList: [], //待选择工作人员列表
      isNeedConfirm: true
    };
  },
  computed: {
    staffListCount() {
      return this.staffList.length !== 0;
    },
    wrongInfoCount() {
      return Object.keys(this.wrongInfo).length;
    }
  },
  methods: {
    getWrongInfo(id) {
      getWrongInfo(id).then(res => {
        this.wrongInfo = res.data;
      });
    },
    getLeaderList() {
      getLeaderList().then(res => {
        console.log(res);
        this.columns = res.data;
      });
    },
    getStaffList() {
      getStaffList().then(res => {
        this.staffList = res.data;
        console.log(this.staffList);
      });
    },

    handleSubmit () {
      this.doPostMarkTask(() => {
        this.isNeedConfirm = false;
        this.$router.go(-1);
      })
    },

    doPostMarkTask (fun) {
      let submitData = {
        id: this.wrongId,
        leader: this.value,
        members: this.memberList
      };
      postMarkTask(submitData).then(res => {
        window.wrongList.splice(this.wrongIndex,1);
        this.clearData();
        fun();
        this.$toast(res.msg);
      });
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    clearData(){
      this.wrongInfo = {};
      this.value = "";
      this.memberList = [];
    }
  },
  components: {
    loading
  },
  created() {
    this.getLeaderList();
    this.getStaffList();
    this.wrongIndex = this.$route.params.index;
    this.wrongId = this.$route.params.id;
    console.log(this.wrongIndex, this.wrongId);
    this.getWrongInfo(this.wrongId);
  },
  activated() {
    this.getWrongInfo(this.wrongId); //获取详情信息
  },
  deactivated() {
    this.wrongInfo = {};
    this.value = "";
    this.memberList = [];
    this.isNeedConfirm = true;
  },
  beforeRouteLeave(from, to, next) {
    if (this.isNeedConfirm) {
      Dialog.confirm({
        title: "保存",
        message: "是否保存当前页面?"
      })
        .then(() => {
          this.doPostMarkTask(next)
        })
        .catch(err => {
          next();
        })
    }else{
      next();
    }
  }
};
</script>
